<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>结账单</title>
    <style>
      @page {
        margin: 0;
      }
      /**打印样式增加内边距*/
      @media print {
        .more-bill-card {
          width: 72.1mm;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          margin: 0;
          padding: 2mm;
          box-sizing: border-box;
        }
      }
      .more-bill-card .title {
        font-size: 20px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        /* font-weight: 700; */
        text-align: center;
        color: #000;
      }

      .more-bill-card .description {
        font-size: 18px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        text-align: center;
        color: #000;
        margin: 4px 0;
      }

      .more-bill-card .desc-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000;
        margin-top: 6px;
      }

      .more-bill-card .desc-item .desc-item-right {
        display: flex;
        align-items: center;
      }

      .more-bill-card .desc-item .desc-item-right p {
        margin: 0 20px;
      }

      .more-bill-card .desc-line {
        height: 1px;
        margin-top: 6px;
        width: 100%;
        background: #000;
        border-top: 1px solid #000;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .more-bill-card .desk-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
        margin-top: 4px;
      }

      .more-bill-card .desk-box .desk-box-left {
        width: 70px;
      }

      .more-bill-card .desk-box .desk-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        max-width: 300px;
        line-height: 20px;
      }

      .more-bill-card .desk-box:last-child {
        margin-right: 0;
      }

      .more-bill-card .good-list-box {
        margin-top: 4px;
      }

      .more-bill-card .good-list-box .good-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
      }

      .more-bill-card .good-list-box .good-item .good-right-box {
        display: flex;
        align-items: center;
      }

      .more-bill-card .good-list-box .good-item .good-right-box p {
        margin: 0 20px;
      }

      .more-bill-card .good-list-box .good-sku-item {
        margin-top: 2px;
        font-size: 14px;
        /* font-weight: 10px; */
        font-family:
          PingFang SC,
          PingFang SC-Bold;
        color: #000000;
      }

      .more-bill-card .address-box {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        font-size: 12px;
        font-family:
          PingFang SC,
          PingFang SC-Regular;
        text-align: center;
        color: #000000;
        line-height: 16px;
        margin-top: 80px;
        padding-bottom: 20px;
      }

      .align-items-start {
        display: flex;
        align-items: flex-start;
      }
      .table {
        display: grid !important;
        grid-template-columns: 1fr  33px 36px 84px;
        font-size: 14px !important;
        gap: 8px;
        align-items: center;
      }
      .table.table-5 {
        grid-template-columns:  1fr 32px 33px 43px 43px;

        /* grid-template-columns:  1fr 32px 47px 47px 84px; */
      }
      .table-3 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        text-align: center;
      }
      .table-3 > div:last-child {
        text-align: right;
      }
      .table-3 > div:first-child {
        text-align: left;
      }
      .food-money,
      .foodMoney {
        text-align: right;
        word-break: break-all;
        overflow-wrap: anywhere;
      }
      .food-num,
      .foodNum {
        text-align: right;
        word-break: break-all;
        overflow-wrap: anywhere;
      }
      .food-name,
      .foodName {
        text-align: left;
        word-break: break-all;
      }
    </style>
  </head>

  <body>
    <div id="order">
      <div class="more-bill-card">
        <h1 class="title">
          {{dealAssignDataFunction('', postMessageDatas?.detail?.shopInfo?.shop_name) }}
        </h1>
        <div class="description">【结账单】</div>
        <div class="desc-item">
          <div>桌台： {{computedDeskName}}</div>
          <span>收银员：{{dealAssignDataFunction('',postMessageDatas?.detail?.clerkName )}}</span>
        </div>
        <!-- 桌号 -->
        <div class="desc-item">
          <div>订单ID：{{ dealAssignDataFunction('', postMessageDatas?.ticket_id) }}</div>
          <span
            >[第{{ dealAssignDataFunction('', postMessageDatas?.detail?.printNum) }}次打印]</span
          >
        </div>
        <div class="desc-item">
          <div>打印时间：{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.print?.time) }}</div>
          <span>[{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.print?.slot) }}]</span>
        </div>
        <div class="desc-item">
          <div>开台时间：{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.start?.time) }}</div>
          <span>[{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.start?.slot) }}]</span>
        </div>
        <div class="desc-item">
          <div>
            结束时间：{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.order_pay_time?.time) }}
          </div>
          <span
            >[{{ dealAssignDataFunction('', timeInfo?.timeSlotList?.order_pay_time?.slot) }}]</span
          >
        </div>
        <div class="desc-line"></div>
        <!-- 表头 -->
        <div class="desc-item table" :class="{ 'table-5': priceInfo?.is_vip == 1 }">
          <div class="food-name">菜品名称</div>
          <span class="food-num">数量</span>
          <span class="food-num">单价</span>
          <span class="food-num" v-if="priceInfo?.is_vip == 1">会员价</span>
          <div class="food-money">总金额</div>
        </div>
        <!-- 菜品 -->
        <div v-if="feast_food_list.length > 0">
          <div class="desc-line"></div>
          <div class="good-list-box">
            <div
              class="good-item table good-item-title"
              :class="{ 'table-5': priceInfo?.is_vip == 1 }"
            >
              <div class="foodName">酒席</div>
              <div class="foodNum">{{ postMessageDatas?.detail?.priceInfo.openNum }} 席</div>
              <div class="foodNum">{{ postMessageDatas?.detail?.priceInfo.feastMoney}}</div>
              <div class="foodNum" v-if="priceInfo?.is_vip == 1"></div>
              <div class="foodMoney">{{ postMessageDatas?.detail?.priceInfo.allFeastMoney }}</div>
            </div>
          </div>
          <div class="good-list-box" v-for="food in feast_food_list" :key="food.name">
            <div
              class="good-item table"
              :class="{ 'good-item-title': food.groupInfo && food.groupInfo.length, 'table-5': priceInfo?.is_vip == 1 }"
            >
              <div class="foodName">{{ (food.is_discount == 1 ? '* ' : '') + food.name }}</div>
              <div class="foodNum">{{ food.num }} * {{ food.desk_num }}席</div>
              <div class="foodNum">{{ food.price || food.money }}</div>
              <div class="foodNum" v-if="priceInfo?.is_vip == 1">
                {{ food.member_price || food.price || food.money }}
              </div>
              <div class="foodMoney">{{ food.total_money }}</div>
            </div>
            <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
              ({{ dealFoodSkuDescFun(food) }})
            </div>

            <div class="good-list-box" v-for="data in food.groupInfo" :key="data.sku_id">
              <div class="good-item table" :class="{ 'table-5': priceInfo?.is_vip == 1 }">
                <div class="foodName">{{ (data.is_discount == 1 ? '* ' : '') + data.name }}</div>
                <div class="foodNum">{{ data.num }} * {{ data.desk_num }}席</div>
                <div class="foodNum">{{ data.price || data.money }}</div>
                <div class="foodNum" v-if="priceInfo?.is_vip == 1">
                  {{ data.member_price || data.price || data.money }}
                </div>
                <div class="foodMoney">{{ data.total_money }}</div>
              </div>
              <div class="good-sku-item" v-if="dealFoodSkuDescFun(data)">
                ({{ dealFoodSkuDescFun(data) }})
              </div>
            </div>
          </div>
        </div>

        <!-- // 单一菜品 -->
        <div class="good-list-box" v-for="(food,rs) in foodList" :key="food.name">
          <div class="desc-line" v-if="rs==0"></div>

          <div
            class="good-item table"
            :class="{ 'good-item-title': food.groupInfo && food.groupInfo.length, 'table-5': priceInfo?.is_vip == 1 }"
          >
            <div class="foodName">{{ (food.is_discount == 1 ? '* ' : '') + food.name }}</div>
            <div class="foodNum">
              {{ food.num }} {{ Number(food.desk_num || 0) > 1 ? `*${food.desk_num}席` : '' }}
            </div>
            <div class="foodNum">{{ food.price || food.money }}</div>
            <div class="foodNum" v-if="priceInfo?.is_vip == 1">
              {{ food.member_price || food.price || food.money }}
            </div>
            <div class="foodMoney">{{ food.total_money }}</div>
          </div>
          <div class="good-sku-item" v-if="dealFoodSkuDescFun(food)">
            ({{ dealFoodSkuDescFun(food) }})
          </div>
          <div class="good-list-box" v-for="data in food.groupInfo" :key="data.sku_id">
            <div class="good-item table" :class="{ 'table-5': priceInfo?.is_vip == 1 }">
              <div class="foodName">{{ (data.is_discount == 1 ? '* ' : '') + data.name }}</div>
              <div class="foodNum">{{ data.num }}</div>
              <div class="foodNum">{{ data.price || data.money }}</div>
              <div class="foodNum" v-if="priceInfo?.is_vip == 1">
                {{ data.member_price || data.price || data.money }}
              </div>
              <div class="foodMoney">{{ data.total_money }}</div>
            </div>
            <div class="good-sku-item" v-if="dealFoodSkuDescFun(data)">
              ({{ dealFoodSkuDescFun(data) }})
            </div>
          </div>
        </div>
        <!-- // 退菜 -->
        <div class="good-list-box" v-for="food in back_list" :key="food.name">
          <div
            class="good-item table"
            :class="{ 'good-item-title': food.groupInfo && food.groupInfo.length, 'table-5': priceInfo?.is_vip == 1 }"
          >
            <div class="foodName">{{ (food.is_discount == 1 ? '* ' : '') + food.name }}</div>
            <div class="foodNum">
              {{ food.num }} {{ Number(food.desk_num || 0) > 1 ? `*${food.desk_num}席` : '' }}
            </div>
            <div class="foodNum">{{ food.price || food.money }}</div>
            <div class="foodNum" v-if="priceInfo?.is_vip == 1">
              {{ food.member_price || food.price || food.money }}
            </div>
            <div class="foodMoney">{{ food.total_money }}</div>
          </div>
          <div class="good-sku-item">(退)</div>
          <div class="good-list-box" v-for="data in food.groupInfo" :key="data.sku_id">
            <div class="good-item table" :class="{ 'table-5': priceInfo?.is_vip == 1 }">
              <div class="foodName">{{ (data.is_discount == 1 ? '* ' : '') + data.name }}</div>
              <div class="foodNum">{{ data.num }}</div>
              <div class="foodNum">{{ data.price || data.money }}</div>
              <div class="foodNum" v-if="priceInfo?.is_vip == 1">
                {{ data.member_price || data.price || data.money }}
              </div>
              <div class="foodMoney">{{ data.total_money }}</div>
            </div>
            <div class="good-sku-item">(退)</div>
          </div>
        </div>
        <div class="desc-line"></div>
        <!-- 应收 -->
        <div class="good-list-box">
          <div class="good-item table" :class="{ 'table-5': priceInfo?.is_vip == 1 }">
            <div class="foodName">小计</div>
            <div class="foodNum">{{ dealAssignDataFunction(0, priceInfo?.foodNum) }}</div>
            <div class="foodNum"></div>
            <div class="foodNum" v-if="priceInfo?.is_vip == 1"></div>
            <div class="foodMoney">{{ dealAssignDataFunction(0, priceInfo?.originMoney) }}</div>
          </div>
        </div>
        <div class="desc-line"></div>
        <!-- 金额详情 -->
        <div class="desc-item table-3" v-if="priceInfo?.backNum && priceInfo.backNum > 0">
          <div>退菜</div>
          <div>{{ priceInfo.backNum }}份</div>
          <div>-{{ priceInfo.backMoney }}</div>
        </div>

        <div class="desc-item table-3" v-if="priceInfo?.presentMoney && priceInfo.presentMoney > 0">
          <div>赠送</div>
          <div>{{ priceInfo.presentNum }}份</div>
          <div>-{{ priceInfo.presentMoney }}</div>
        </div>

        <div
          class="desc-item table-3"
          v-if="priceInfo?.memberSubMoney && priceInfo.memberSubMoney > 0"
        >
          <div>会员价优惠</div>
          <div></div>
          <div>-{{ priceInfo.memberSubMoney }}</div>
        </div>

        <div class="desc-item table-3" v-if="coupon?.name">
          <div>优惠券</div>
          <div>{{ coupon?.name}}</div>
          <div>-{{ coupon?.money || coupon?.amount }}</div>
        </div>

        <div class="desc-item table-3" v-if="priceInfo?.point && priceInfo.point > 0">
          <div>积分抵扣</div>
          <div>{{ priceInfo.point }}积分</div>
          <div>-{{ priceInfo.pointMoney }}</div>
        </div>

        <div class="desc-item table-3" v-if="priceInfo?.reduceMoney && priceInfo.reduceMoney > 0">
          <div>抹零</div>
          <div>{{ priceInfo.reduceMoney }}元</div>
          <div>-{{ priceInfo.reduceMoney }}</div>
        </div>

        <div
          class="desc-item table-3"
          v-if="priceInfo?.discountMoney && priceInfo.discountMoney > 0"
        >
          <div>打折</div>
          <div></div>
          <div>-{{ priceInfo.discountMoney }}</div>
        </div>

        <div class="desc-item table-3" v-if="priceInfo?.serviceMoney && priceInfo.serviceMoney > 0">
          <div>服务费</div>
          <div></div>
          <div>+{{ priceInfo.serviceMoney }}</div>
        </div>

        <div class="desc-line"></div>

        <!-- 应收合计 -->
        <div class="desc-item">
          <div>应收合计</div>
          <span></span>
          <div>{{ priceInfo.payMoney || priceInfo.originMoney }}</div>
        </div>
        <div class="desc-line"></div>
        <!-- 实收  -->
        <div class="desc-item">
          <div>实收：</div>
          <span></span>
          <span>{{payMethod }} {{ priceInfo.real_pay_money || priceInfo.payMoney }}</span>
        </div>
        <template v-if="payInfo.length > 1 || credit_list.length > 0">
          <div class="desc-item">
            <div>实收明细</div>
          </div>
          <div class="desc-item" v-for="item in payInfo">
            <div>{{ item.name }}:</div>
            <span></span>
            <span>{{ item.money || item.amount }}</span>
          </div>
          <template v-for="item in credit_list">
            <div class="desc-item">
              <div>{{ item.type == 1 ? '企业挂账' : '个人挂账' }}:</div>
              <span></span>
              <span>{{ item.money || item.amount }}</span>
            </div>
            <div class="desc-item">
              <div>{{ item.type == 1 ? '企业账户' : '挂账账户' }}:</div>
              <span></span>
              <span>{{ item.account_name }}</span>
            </div>
            <div class="desc-item">
              <div>账户累计挂账金额:</div>
              <span></span>
              <span>{{ item.used || 0 }}</span>
            </div>
            <div class="desc-item">
              <div>剩余信用额度:</div>
              <span></span>
              <span>{{ item.balance || 0 }}</span>
            </div>
            <div class="desc-item">
              <div>担保人:</div>
              <span></span>
              <span>{{ item.org_name }}</span>
            </div>
            <div class="desc-item">
              <div>消费客户签字:</div>
              <span></span>
              <span></span>
            </div>
          </template>
        </template>
        <div class="desc-line"></div>
        <template v-if="userInfo && userInfo.real_name">
          <div class="desc-item">
            <div>会员姓名： {{ userInfo.real_name }}</div>
            <span>会员类型：{{ userInfo.grade_name }}</span>
          </div>
          <div class="desc-item">
            <div>会员卡号： {{ userInfo.user_id }}</div>
            <span></span>
          </div>
          <div class="desc-item">
            <div>会员积分： {{ userInfo.points }}</div>
            <span>会员余额：{{ userInfo.balance }}</span>
          </div>
        </template>

        <div class="address-box">
          <span>{{ dealAssignDataFunction('', postMessageDatas?.detail?.shopInfo?.address) }}</span>
          <span
            >订座电话：{{ dealAssignDataFunction('', postMessageDatas?.detail?.shopInfo?.phone)
            }}</span
          >
          <span>技术支持：贵州一粒米科技餐饮软件服务有限公司</span>
        </div>
        <div style="height: 10px"></div>
      </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: '#order',
        data: {
          postMessageDatas: {},
          timeInfo: {},
          priceInfo: {},
          payInfo: [],
          credit_list: [],
          userInfo: {},
          payInfo: [],
          credit_list: [],
          userInfo: {},
          coupon: {},
          payMethodEunm: {
            balance: '余额',
            cash: '现金',
            virtual: '虚拟支付',
            alipay: '支付宝',
            on_account: '挂账',
            // on_account: '个人挂账',
            integripay: '积分支付'
          }
        },
        mounted() {
          const { ipcRenderer } = require('electron')
          ipcRenderer.on('print-info', (event, printerName, res, printerPage) => {
            this.postMessageDatas = res
            this.coupon = this.dealAssignDataFunction({}, res?.detail?.coupon)
            this.timeInfo = this.dealAssignDataFunction({}, res?.detail?.timeInfo)
            this.priceInfo = this.dealAssignDataFunction({}, res?.detail?.priceInfo)
            this.payInfo = this.dealAssignDataFunction([], res?.detail?.payInfo)
            this.userInfo = this.dealAssignDataFunction([], res?.detail?.userInfo)
            this.credit_list = this.dealAssignDataFunction([], res?.detail?.credit_list)
            // 获取到高度
            this.$nextTick(() => {
              const height = document.getElementById('order').offsetHeight
              ipcRenderer.send('printStart', printerName, height)
              // 触发打印
            })
          })
        },
        methods: {
          isEmpty(value) {
            switch (typeof value) {
              case 'undefined':
                return true
              case 'string':
                if (value.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length === 0) return true
                break
              case 'boolean':
                if (!value) return true
                break
              case 'number':
                if (value === 0 || isNaN(value)) return true
                break
              case 'object':
                if (value === null || value.length === 0) return true
                // eslint-disable-next-line
                for (const i in value) {
                  return false
                }
                return true
            }
            return false
          },
          // 处理数据赋值操作的函数：defaultValue是默认值，apiValue是接收的网络api接口数据进行判空和进行赋值
          dealAssignDataFunction(defaultValue, apiValue) {
            if (this.isEmpty(apiValue)) {
              return defaultValue
            }
            return apiValue
          }
        },
        computed: {
          computedDeskName() {
            let deskNameList = []
            if (
              this.postMessageDatas &&
              this.postMessageDatas.detail &&
              this.postMessageDatas.detail.deskList &&
              this.postMessageDatas.detail.deskList.length
            ) {
              deskNameList = this.postMessageDatas.detail.deskList.map(desk => {
                return `${desk.name}(${desk.use_num}人)`
              })
              return deskNameList.join('、')
            }
            return ''
          },
          // 处理回显菜品的规格信息（做法+口味+部位）
          dealFoodSkuDescFun() {
            return function (item) {
              if (item && item.notes && item.notes.length) {
                return item.notes.join('、')
              } else {
                return false
              }
            }
          },
          // 隐藏字符串中间五位数替换成符号“ * ”
          hiddenNumber(val) {
            return function (val) {
              const phoneNumber = val ? String(val) : ''
              return phoneNumber.replace(/(\d{3})\d{4}(\d{3})/, '$1*****$2')
            }
          },
          // 菜品列表
          foodList() {
            return this.dealAssignDataFunction([], this.postMessageDatas?.detail?.foodList)
          },

          feast_food_list() {
            return this.dealAssignDataFunction([], this.postMessageDatas?.detail?.feast_food_list)
          },

          back_list() {
            return this.dealAssignDataFunction([], this.postMessageDatas?.detail?.back_list)
          },
          // 单价合计
          totalPrice() {
            let totalmoney = 0
            let totalNum = 0
            let totalTotal_money = 0
            this.back_list.forEach(item => {
              totalmoney += item.money
              totalNum += item.num
              totalTotal_money += item.total_money
            })
            this.feast_food_list.forEach(item => {
              totalmoney += item.money
              totalNum += item.num
              totalTotal_money += item.total_money
            })
            this.foodList.forEach(item => {
              totalmoney += item.money
              totalNum += item.num
              totalTotal_money += item.total_money
            })
            return {
              totalmoney,
              totalNum,
              totalTotal_money
            }
          },
          // 支付方式
          payMethod() {
            if (this.credit_list.length > 0 && this.payInfo.length == 0) {
              return '挂账支付'
            }

            let payMethod = [...this.payInfo, ...this.credit_list]
            if (payMethod.length > 1) return '混合支付'
            return payMethod[0].name
            // return dealAssignDataFunction([], this.orderDetailData?.detail?.payInfo)
          }
        }
      })
    </script>
  </body>
</html>
